{% extends 'console.html' %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
                <!-- 搜索表单 -->
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">任务名</label>
                            <div class="layui-input-inline">
                                <select id="comp_task_name" name="comp_task_name">
                                    <option value="">直接或搜索选择</option>
                                    <!-- 动态展示区域 -->
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">schema</label>
                            <div class="layui-input-inline">
                                <input type="text" id="schema" name="schema" placeholder="schema" class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="table_name" name="table_name" placeholder="表名"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">字段名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="column_name" name="column_name" placeholder="字段名"
                                       class="layui-input"
                                       lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">汇总</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="total_check_result" name="total_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查表</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_name_check_result" name="table_name_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查字段</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="column_name_check_result" name="column_name_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查列类型</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="data_type_check_result" name="data_type_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查默认值</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="data_default_check_result" name="data_default_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查主键</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="pkey_check_result" name="pkey_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查是空</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="nullable_check_result" name="nullable_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查表注释</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="table_comment_check_result" name="table_comment_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">检查列注释</label>
                            <div class="layui-input-inline" style="width: 90px;">
                                <select id="column_comment_check_result" name="column_comment_check_result"
                                        lay-verify="column_comment_check_result">
                                    <option value=""></option>
                                    <option value="×">×</option>
                                    <option value="√">√</option>
                                </select>
                            </div>
                        </div>
                        {#</div>
                    <div class="form-footer">#}
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="formSubmit"
                                id="btnSearch">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                        </button>

                        <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset"
                                id="customReset">
                            <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                        </button>

                        <button class="layui-btn layuiadmin-btn-list layui-btn-normal" id="exportAllBtn"
                                lay-submit lay-filter="export">
                            <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出cvs
                        </button>
                    </div>
                </form>
            </div>

            <div class="layui-card-body">
                <!-- 数据表格 -->
                <table id="compareLayuiTable" lay-filter="compareLayuiTable"></table>
            </div>
        </div>
    </div>

{% endblock %}


{% block script %}
    <script>
        layui.use(['table', 'form', 'layer', 'dropdown'], function () {
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;


            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dcs/api/getCompareTaskNames',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.comp_task_name + '">' + item.comp_task_name + '</option>';
                        });
                        $('#comp_task_name').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 初始化表格
            var appLayuiTable = table.render({
                elem: '#compareLayuiTable',
                url: '/dcs/api/compareTableJobResults',
                method: 'get',
                page: {
                    limit: 10, //每页显示条数
                    limits: [10, 20, 50, 100],
                    curr: 1, //起始页
                    groups: 5, //连续页码个数
                    prev: '上一页', //上一页文本
                    next: '下一页', //下一页文本
                    first: 1, //首页文本
                    //, last: 100                     //尾页文本
                    layout: ['prev', 'page', 'next',
                        'refresh', 'skip', 'count',
                        'limit']
                },
                // height: 600,
                toolbar: '#toolbarDemo',
                // defaultToolbar: ['filter', 'exports'],
                defaultToolbar: ['filter', {
                    title: '导出全部数据',
                    layEvent: 'EXPORT_ALL',
                    icon: 'layui-icon-export'
                }],
                cols: [
                    [
                        {field: 'result_id', title: 'ID', width: 100, align: 'center', fixed: 'left'},
                        {
                            field: 'comp_task_name',
                            title: '比对任务名称',
                            width: 130,
                            align: 'left',
                            fixed: 'left',
                            // templet: addlink,
                            sort: true
                        },
                        // result_id, comp_task_id, comp_task_name, schema, table_name, column_name,
                        {field: 'schema', title: 'schema', width: 180, align: 'left', fixed: 'left'},
                        {field: 'table_name', title: '表名', width: 200, align: 'left', fixed: 'left'},
                        {field: 'column_name', title: '字段名', width: 200, align: 'left', fixed: 'left'},
                        // total_check_result, column_name_check_result, column_name1, column_name2, column_name3, column_name4, column_name5, column_name6, column_name7, data_type_check_result, data_type1, data_type2, data_type3, data_type4, data_type5, data_type6, data_type7, data_default_check_result, data_default1, data_default2, data_default3, data_default4, data_default5, data_default6, data_default7, pkey_check_result, pkey1, pkey2, pkey3, pkey4, pkey5, pkey6, pkey7, nullable_check_result, nullable1, nullable2, nullable3, nullable4, nullable5, nullable6, nullable7, table_comment_check_result, table_comment1, table_comment2, table_comment3, table_comment4, table_comment5, table_comment6, table_comment7, column_comment_check_result, column_comment1, column_comment2, column_comment3, column_comment4, column_comment5, column_comment6, column_comment7, creation_date
                        {field: 'total_check_result', title: '汇总', width: 80, align: 'center', fixed: 'left'},
                        {field: 'table_name_check_result', title: '检查表', width: 86, align: 'center'},
                        {field: 'table_name1', title: '表1', width: 70, align: 'center'},
                        {field: 'table_name2', title: '表2', width: 70, align: 'center'},
                        {field: 'table_name3', title: '表3', width: 70, align: 'center'},
                        {field: 'table_name4', title: '表4', width: 70, align: 'center'},
                        {field: 'table_name5', title: '表5', width: 70, align: 'center'},
                        {field: 'table_name6', title: '表6', width: 70, align: 'center'},
                        {field: 'table_name7', title: '表7', width: 70, align: 'center'},

                        {field: 'column_name_check_result', title: '检查字段', width: 86, align: 'center'},
                        {field: 'column_name1', title: '字段1', width: 70, align: 'center'},
                        {field: 'column_name2', title: '字段2', width: 70, align: 'center'},
                        {field: 'column_name3', title: '字段3', width: 70, align: 'center'},
                        {field: 'column_name4', title: '字段4', width: 70, align: 'center'},
                        {field: 'column_name5', title: '字段5', width: 70, align: 'center'},
                        {field: 'column_name6', title: '字段6', width: 70, align: 'center'},
                        {field: 'column_name7', title: '字段7', width: 70, align: 'center'},

                        {field: 'data_type_check_result', title: '字段类型', width: 86, align: 'center'},
                        {field: 'data_type1', title: '类型1', width: 150, align: 'center'},
                        {field: 'data_type2', title: '类型2', width: 150, align: 'center'},
                        {field: 'data_type3', title: '类型3', width: 150, align: 'center'},
                        {field: 'data_type4', title: '类型4', width: 150, align: 'center'},
                        {field: 'data_type5', title: '类型5', width: 150, align: 'center'},
                        {field: 'data_type6', title: '类型6', width: 150, align: 'center'},
                        {field: 'data_type7', title: '类型7', width: 150, align: 'center'},

                        {field: 'data_default_check_result', title: '查默认值', width: 86, align: 'center'},
                        {field: 'data_default1', title: '默认值1', width: 140, align: 'center'},
                        {field: 'data_default2', title: '默认值2', width: 140, align: 'center'},
                        {field: 'data_default3', title: '默认值3', width: 140, align: 'center'},
                        {field: 'data_default4', title: '默认值4', width: 140, align: 'center'},
                        {field: 'data_default5', title: '默认值5', width: 140, align: 'center'},
                        {field: 'data_default6', title: '默认值6', width: 140, align: 'center'},
                        {field: 'data_default7', title: '默认值7', width: 140, align: 'center'},

                        {field: 'pkey_check_result', title: '查主键', width: 86, align: 'center'},
                        {field: 'pkey1', title: '主键1', width: 70, align: 'center'},
                        {field: 'pkey2', title: '主键2', width: 70, align: 'center'},
                        {field: 'pkey3', title: '主键3', width: 70, align: 'center'},
                        {field: 'pkey4', title: '主键4', width: 70, align: 'center'},
                        {field: 'pkey5', title: '主键5', width: 70, align: 'center'},
                        {field: 'pkey6', title: '主键6', width: 70, align: 'center'},
                        {field: 'pkey7', title: '主键7', width: 70, align: 'center'},

                        {field: 'nullable_check_result', title: '查是空', width: 86, align: 'center'},
                        {field: 'nullable1', title: '是空1', width: 70, align: 'center'},
                        {field: 'nullable2', title: '是空2', width: 70, align: 'center'},
                        {field: 'nullable3', title: '是空3', width: 70, align: 'center'},
                        {field: 'nullable4', title: '是空4', width: 70, align: 'center'},
                        {field: 'nullable5', title: '是空5', width: 70, align: 'center'},
                        {field: 'nullable6', title: '是空6', width: 70, align: 'center'},
                        {field: 'nullable7', title: '是空7', width: 70, align: 'center'},

                        {field: 'table_comment_check_result', title: '查表注释', width: 86, align: 'center'},
                        {field: 'table_comment1', title: '表注释1', width: 100, align: 'left'},
                        {field: 'table_comment2', title: '表注释2', width: 100, align: 'left'},
                        {field: 'table_comment3', title: '表注释3', width: 100, align: 'left'},
                        {field: 'table_comment4', title: '表注释4', width: 100, align: 'left'},
                        {field: 'table_comment5', title: '表注释5', width: 100, align: 'left'},
                        {field: 'table_comment6', title: '表注释6', width: 100, align: 'left'},
                        {field: 'table_comment7', title: '表注释7', width: 100, align: 'left'},

                        {field: 'column_comment_check_result', title: '查列注释', width: 86, align: 'center'},
                        {field: 'column_comment1', title: '列注释1', width: 100, align: 'left'},
                        {field: 'column_comment2', title: '列注释2', width: 100, align: 'left'},
                        {field: 'column_comment3', title: '列注释3', width: 100, align: 'left'},
                        {field: 'column_comment4', title: '列注释4', width: 100, align: 'left'},
                        {field: 'column_comment5', title: '列注释5', width: 100, align: 'left'},
                        {field: 'column_comment6', title: '列注释6', width: 100, align: 'left'},
                        {field: 'column_comment7', title: '列注释7', width: 100, align: 'left'},

                        {field: 'creation_date', title: '更新时间', width: 180, align: 'left'}
                        // ,{fixed: 'right', title: '操作', width: 150, toolbar: '#barOption'}
                    ]
                ],
                done: function (res) {
                    // 渲染完成后动态设置表头高度
                    $('.layui-table-header tr').css('height', '80px');
                    $('.layui-table-header th').css({
                        'height': '80px',
                        'line-height': '80px',
                        'padding': '0'
                    });

                    // layui table 单元格 添加底色。遍历表格中的每一行
                    $('.layui-table tbody tr').each(function () {
                        // 获取当前行的所有单元格
                        var $cells = $(this).children('td');
                        // 遍历每一个单元格
                        $cells.each(function () {
                            var $cell = $(this);
                            var value = $cell.text();
                            // 假设我们想为值大于10的单元格设置背景色
                            if (value === '√') {
                                // $cell.css('background-color', 'green');
                                $cell.addClass('check-ok');
                            } else if (value === '×') {
                                // $cell.css('background-color', 'red');
                                $cell.addClass('check-not-ok');
                            }
                        });
                    });
                }
            });

            // 绑定表单提交事件。点击搜索按钮，提交表单
            form.on('submit(formSubmit)', function (data) {
                appLayuiTable.reload({
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            form.on('submit(export)', function (data) {
                exportAllDataFromConditions();
                return false;
            });

            // 导出按钮事件 监听工具栏事件
            table.on('toolbar(compareLayuiTable)', function (obj) {
                if (obj.event === 'EXPORT_ALL') {
                    exportAllDataFromConditions();
                }
            });

            function exportAllDataFromConditions() {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    // 显示加载中
                    var loadIndex = layer.load(2);

                    var comp_task_name2 = $('#comp_task_name').val();

                    if (isFieldEmpty(comp_task_name2)) {
                        layer.confirm('导出失败！请输入“任务名”再导出！', function (index) {
                            layer.closeAll();
                        });
                    } else {
                        var schema2 = $('#schema').val();
                        var table_name2 = $('#table_name').val();
                        var column_name2 = $('#column_name').val();
                        var total_check_result2 = $('#total_check_result').val();
                        var table_name_check_result2 = $('#table_name_check_result').val();
                        var column_name_check_result2 = $('#column_name_check_result').val();
                        var data_type_check_result2 = $('#data_type_check_result').val();
                        var data_default_check_result2 = $('#data_default_check_result').val();
                        var pkey_check_result2 = $('#pkey_check_result').val();
                        var nullable_check_result2 = $('#nullable_check_result').val();
                        var table_comment_check_result2 = $('#table_comment_check_result').val();
                        var column_comment_check_result2 = $('#column_comment_check_result').val();

                        var exportUrl = '/dcs/api/compareTableJobResults?export=1&';

                        exportUrl += 'comp_task_name' + '=' + encodeURIComponent(comp_task_name2) + '&';
                        exportUrl += 'schema' + '=' + encodeURIComponent(schema2) + '&';
                        exportUrl += 'table_name' + '=' + encodeURIComponent(table_name2) + '&';
                        exportUrl += 'column_name' + '=' + encodeURIComponent(column_name2) + '&';
                        exportUrl += 'total_check_result' + '=' + encodeURIComponent(total_check_result2) + '&';
                        exportUrl += 'table_name_check_result' + '=' + encodeURIComponent(table_name_check_result2) + '&';
                        exportUrl += 'column_name_check_result' + '=' + encodeURIComponent(column_name_check_result2) + '&';
                        exportUrl += 'data_type_check_result' + '=' + encodeURIComponent(data_type_check_result2) + '&';
                        exportUrl += 'data_default_check_result' + '=' + encodeURIComponent(data_default_check_result2) + '&';
                        exportUrl += 'pkey_check_result' + '=' + encodeURIComponent(pkey_check_result2) + '&';
                        exportUrl += 'nullable_check_result' + '=' + encodeURIComponent(nullable_check_result2) + '&';
                        exportUrl += 'table_comment_check_result' + '=' + encodeURIComponent(table_comment_check_result2) + '&';
                        exportUrl += 'column_comment_check_result' + '=' + encodeURIComponent(column_comment_check_result2) + '&';
                        // for (var key in searchParams) {
                        //     if (searchParams[key]) {
                        //         exportUrl += key + '=' + encodeURIComponent(searchParams[key]) + '&';
                        //     }
                        // }

                        // 创建隐藏的iframe进行下载
                        var iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        iframe.src = exportUrl;
                        document.body.appendChild(iframe);

                        layer.close(loadIndex);
                    }
                    layer.close(loadIndex);
                });
            }

            // 导出全部
            {#$('#exportAllBtn').click(function () {
                exportAllDataFromConditions();
            });#}

        });

    </script>

{% endblock %}
